<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Merienda' rel='stylesheet'>
<link href="css/aos.css" rel="stylesheet">

<title>Home</title>
<link rel="icon" href="images/logo.png">
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div id="Welcome">
	<!---Start navigation Bar -->
	<nav class="navbar navbar-expand-lg navbar fixed-top  navbar-light bg-light">
		<a class="navbar-brand" href="#Welcome">
			<img src="images/logo.png" width="50" height="50" class="d-inline-block" alt=""> Italian Restaurant
		</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
			<span class="navbar-toggler-icon"></span>
		</button>
		<div class="collapse navbar-collapse" id="navbarText">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item">
					<a class="nav-link" href="#Welcome">Welcome</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#Restaurant">Restaurant</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#Menu">Menu</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#Reservation">Reservation</a>
				</li>
				<li class="nav-item">
					<a class="nav-link" href="#OurLocation">Our Location</a>
				</li>
				<li class="nav-item">
					<a href="it/index.html" class="language" rel="it-IT"><img src="images/italy.ico" class="flag" alt="Italiano" /></a>
					<a href="index.html" class="language" rel="en-En"><img src="images/english.ico" class="flag" alt="English" /></a>
				</li>
			</ul>
		</div>
	</nav>
	<!--- End Navigation Bar -->
	<!--- Start Carousel -->
	<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img class="d-block w-100 img-fluid img-slider" src="images/slider1.jpg" alt="First slide">
				<div class="carousel-caption">
					<h2>Welcome!</h2>
					<p>...</p>
				</div>
			</div>
			<div class="carousel-item">
				<img class="d-block w-100 img-fluid img-slider" src="images/slider2.jpg" alt="Second slide">
				<div class="carousel-caption">
					<h2>Traditional Italian Cuisine</h2>
					<p>...</p>
				</div>
			</div>
			<div class="carousel-item">
				<img class="d-block w-100 img-fluid img-slider" src="images/slider3.jpg" alt="Third slide">
				<div class="carousel-caption">
					<h2>Selected Products</h2>
					<p>...</p>
				</div>
			</div>
		</div>
		<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
			<span class="carousel-control-prev-icon" aria-hidden="true"></span>
			<span class="sr-only">Previous</span>
		</a>
		<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
</div>
	<!--- End of Carousel -->
	<!--- Restaurant-->
<div class="container">
	<div class="row" id="Restaurant">
		<div class="col navMenu">
			<h2 class="text-center" >~ Restaurant ~</h2>
		</div>
	</div>
	<div class="row bg-light" >
		<div class="col-md-6">
			<h3>Location</h3>
			<p>Thanks for stopping by. We are the last authentic Italian restaurant in Milan, serving delicious Italian cuisine cooked by the best chefs. It only takes a few minutes to browse through our website and check out our menu. We hope you'll soon join us for a superb Italian culinary experience.</p>
			<h5>A Unique Experience</h5>
			<p>Thanks for stopping by. We are the last authentic Italian restaurant in Milan, serving delicious Italian cuisine cooked by the best chefs. It only takes a few minutes to browse through our website and check out our menu. We hope you'll soon join us for a superb Italian culinary experience.</p>
		</div>
		<div class="col-md-6" data-aos="fade-up">
			<img class="img-fluid" src="images/location.jpg">
		</div>
	</div>
	<div class="row bg-light"><br></div>
	<div class="row bg-light">
		<div class="col-md-6 order-md-1 order-2" data-aos="fade-up">
			<img class="img-fluid " src="images/cuisine.jpg">
		</div>
		<div class="col-md-6 order-md-12 order-1">
			<h3>Cuisine</h3>
			<p>Thanks for stopping by. We are the last authentic Italian restaurant in Milan, serving delicious Italian cuisine cooked by the best chefs. It only takes a few minutes to browse through our website and check out our menu. We hope you'll soon join us for a superb Italian culinary experience.</p>
			<h5>A Unique Experience</h5>
			<p>Thanks for stopping by. We are the last authentic Italian restaurant in Milan, serving delicious Italian cuisine cooked by the best chefs. It only takes a few minutes to browse through our website and check out our menu. We hope you'll soon join us for a superb Italian culinary experience.</p>
		</div>
	</div>
	<!--- End of Restaurant -->
	<!--- Start of Menu-->
	<div class="row" id="Menu">
		<div class="col navMenu">
			<h2 class="text-center" >~ Menu ~</h2>
		</div>
	</div>
	<div class="row bg-light">
		<div class="col-md-4" data-aos="slide-up">
			<div class="card view zoom">
				<img class="card-img-top img-fluid " src="images/meat-menu.jpg">
				<div class="card-body">
					<h5 class="card-title">~ Meat Menu ~</h5>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Bocconcini di carne in nido di sfoglia</li>
						<li class="list-group-item">Bruschette con maiale al curry</li>
						<li class="list-group-item">Uova al prosciutto</li>
						<li class="list-group-item">Vitello tonnato</li>
						<li class="list-group-item">Fesa di tacchino marinata con olive</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-md-4" data-aos="slide-up">
			<div class="card">
				<img class="card-img-top img-fluid " src="images/fish-menu.jpg">
				<div class="card-body">
					<h5 class="card-title">~ Fish Menu ~</h5>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Carpaccio di polpo</li>
						<li class="list-group-item">Cozze al verde</li>
						<li class="list-group-item">Cocktail di gamberi</li>
						<li class="list-group-item">Risotto alla crema di scampi</li>
						<li class="list-group-item">Ravioli di pesce con crema di scampi</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="col-md-4" data-aos="slide-up">
			<div class="card">
				<img class="card-img-top img-fluid" src="images/menu-vegetarian.jpg">
				<div class="card-body">
					<h5 class="card-title">~ Vegetarian Menu ~</h5>
					<ul class="list-group list-group-flush">
						<li class="list-group-item">Parmigiana di melanzane</li>
						<li class="list-group-item">Strudel con ricotta e spinaci</li>
						<li class="list-group-item">Polpette di spinaci e ricotta</li>
						<li class="list-group-item">Frittata di patate al forno</li>
						<li class="list-group-item">Spaghetti con le polpettine vegetariane</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--- End of Menu -->
	<!--- Start of Reservation-->
	<div class="row" id="Reservation">
		<div class="col navMenu">
			<h2 class="text-center">~ Reservation ~</h2>
		</div>
	</div>
	<div class="row">
		<div class=" col-lg-12 reserve-container" data-aos="fade-up">
			<img class="img-fluid image-reserve" src="images/reserve.jpg">
			<div class="reserve-text col-lg-12 ">
				<h1 class="text-center">Timetables</h1>
				<div class="row">
					<div class="col-6">
						<h2 class="text-center">Lunch</h2>
						<h5 class="text-center">12:00 - 15:00</h5>
					</div>
					<div class="col-6">
						<h2 class="text-center">Dinner</h2>
						<h5 class="text-center">19:30 - 23:30</h5>
					</div>
				</div>
			</div>
		</div>
	</div>
	<br>
	<div class="row bg-light">
		<div class="col">
			<form>
				<div class="form-row">
					<div class="form-group col-6">
						<h3>Reserve</h3>
						<label for="inputDate"> Date</label>
						<input type="date" class="form-control" id="inputDate" placeholder="Data gg/mm/aaaa">
					</div>
					<div class="form-group col-6">
						<h3>Details</h3>
						<label for="inputName"> Name</label>
						<input type="text" class="form-control" id="inputName" placeholder="Name">
					</div>
					<div class="form-group col-6">
						<label for="inputTime"> Timetables</label>
						<input type="time" class="form-control" id="inputTime" placeholder="Timetables">
					</div>
					<div class="form-group col-6">
						<label for="inputEmail"> Email</label>
						<input type="email" class="form-control" id="inputEmail" placeholder="Email">
					</div>
					<div class="form-group col-6">
						<label for="inputNumber"> Number of Guests</label>
						<input type="number" class="form-control" id="inputNumber" placeholder="Number of Guests">
					</div>
					<div class="form-group col-6">
						<label for="inputCel"> Phone</label>
						<input type="tel" class="form-control" id="inputCel" placeholder="Phone">
					</div>
					<div class="form-group col-12">
						<label for="inputComment"> Further requests</label>
						<textarea class="form-control" rows="4" id="inputComment" placeholder="Further requests"></textarea>
					</div>
				</div>
				<div class="row">
					<div class="col-md-4 col-md-offset-4">
						<button type="submit" class="btn btn-secondary btn-block">Reserve</button>
					</div>
				</div>
			</form>
		</div>
	</div>
	<!--- End of Reserve -->
	<!--- Start of Our Location -->
	<div class="row" id="OurLocation">
		<div class="col navMenu">
			<h2 class="text-center">~ Our Location ~</h2>
		</div>
	</div>
	<div class="row">
		
		<div class="col-md-3">
			<h3>Address:</h3>
			<p>Viale Enrico Fermi, 20159 Milan, Mailand (Lombardia) </p>
			<h3>Email:</h3>
			<p>mail@example.com</p>
		</div>
	</div>
	<!--- End of Our Location -->
	<div class="row footer bg-light">
		<div class="col">
			<p class="text-center">Follow us: <a class="social-icon" href="#"><i class="fab fa-facebook"></i></a> <a class="social-icon" href="#"><i class="fab fa-instagram"></i></a></p>
		</div>
		<div class="col">
			<p class="text-center">Copyright &copy; 2019.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
		</div>
		<div class="col">
			<p class="text-center"></p>
		</div>
	</div>
</div>

<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script defer src="js/all.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/smooth-scroll.js"></script>
<script src="js/aos.js"></script>
<script type="text/javascript" src="js/image-effect.js"></script>

</script>
</body>
</html>
